﻿var vm = new Vue({
	el: '#vm',
	data: {
		message: 'Hello Vue!',
		cash_date: new Date(),
		cashbook_list: [],
		cashbook_type_list: [],
		cashbook_type: "加载中...",
		cash_pay: 0,
		cash_income: 0,
		types: [],
		type: "",
	},
	methods: {
		func_click: function ()
		{
			//this.seen = !this.seen;
		},
		ab_type_class: function (ab_type)
		{
			if (ab_type == "+")
			{
				return "text-success";
			}

			return "font-color-hui";
		},
	},
	filters: {
		date: function (val, type)
		{
			return moment(val).format(type);
		}
	},
});


func_page_init();
/////////////////////////////////
////页面初始化API
function func_page_init()
{
	var url = 'api__api.aspx';

	$.ajax({
		dataType: "json",
		url: url,
		data:
			{
				__type: "func_page__cashbook__index",

				__d: (new Date()).valueOf()
			},
		//////////////////////////////////////////////////
		success: function (data, textStatus, jqXHR)
		{
			setTimeout(function ()
			{
				func_page_init__success(data);
			}, 100);
		},
		//////////////////////////////////////////////////
		//error: function (data, textStatus, jqXHR)
		//{
		//}
	});
}


var pub_page_index = 1;
var pub_page_size = 20;
var pub_count = 0;
var pub_click_month_cart = false;
var pub_click_year_cart = false;
function func_page_init__success(data)
{
	console.log(data);


	vm.cash_date = new Date();
	vm.types = data.page.types;

	var yyyyMM = moment(vm.cash_date).format("YYYY-MM");

	func_cashbook_list(yyyyMM, pub_page_index, pub_page_size);

	func_cashbook_sum(yyyyMM);


	$(".more").click(function ()
	{
		var page_num = Math.floor(pub_count / pub_page_size);
		if (pub_count % pub_page_size != 0)
		{
			page_num++;
		}

		if (pub_page_index > page_num)
		{
			func_alert("已经是最后一页了");
			return false;
		}


		var yyyyMM = moment(vm.cash_date).format("YYYY-MM");
		func_cashbook_list(yyyyMM, pub_page_index, pub_page_size);
	});



	$(".month-cart").click(function ()
	{
		if (!pub_click_month_cart)
		{
			var yyyyMM = moment(vm.cash_date).format("YYYY-MM");
			func_cashbook_cart__month(yyyyMM);
		}
	});


	$(".year-cart").click(function ()
	{
		if (!pub_click_year_cart)
		{
			var yyyyMM = moment(vm.cash_date).format("YYYY");
			func_cashbook_cart__year(yyyyMM);
		}
	});


	$(".year-type-cart").click(function ()
	{
		$(".type").show();

		var yyyyMM = moment(vm.cash_date).format("YYYY");
		func_cashbook_cart_type__year(yyyyMM, vm.type);
	});
}


//类型
var pub_type_page_index = 1;
var pub_type_page_size = 20;
var pub_type_count = 0;
var pub_type = "";
function func_cashbook_type_list__js(yyyyMM, type)
{
	pub_type_page_index = 1;
	pub_type_page_size = 20;
	pub_type_count = 0;
	pub_type = type;
	$("#compModalType").modal("show");
	vm.cashbook_type_list = [];


	func_cashbook_type_list(yyyyMM, type, pub_type_page_index, pub_type_page_size);
}

//点击加载更多
$(".more_type").click(function ()
{
	var page_num = Math.floor(pub_type_count / pub_type_page_size);
	if (pub_type_count % pub_type_page_size != 0)
	{
		page_num++;
	}

	if (pub_type_page_index > page_num)
	{
		func_alert("已经是最后一页了");
		return false;
	}


	var yyyyMM = moment(vm.cash_date).format("YYYY-MM");
	func_cashbook_type_list(yyyyMM, pub_type, pub_type_page_index, pub_type_page_size);
});

function func_cashbook_type_list__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		if (vm.cashbook_type_list)
		{
			var list = vm.cashbook_type_list
			for (var i = 0; i < data.list.length; i++)
			{
				list.push(data.list[i]);
			}

			vm.cashbook_type_list = list;
		}
		else
		{
			vm.cashbook_type_list = data.list;
		}


		pub_type_count = data.count;
		vm.cashbook_type = data.type;

		pub_type_page_index++;
	}
	else
	{
		func_alert(data.errmsg);
	}
}

function func_cashbook_list__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		if (vm.cashbook_list)
		{
			var list = vm.cashbook_list
			for (var i = 0; i < data.list.length; i++)
			{
				list.push(data.list[i]);
			}

			vm.cashbook_list = list;
		}
		else
		{
			vm.cashbook_list = data.list;
		}


		pub_count = data.count;
		pub_page_index++;
	}
	else
	{
		func_alert(data.errmsg);
	}
}


function func_cashbook_sum__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		vm.cash_pay = data.cash_pay;
		vm.cash_income = data.cash_income;
	}
	else
	{
		func_alert(data.errmsg);
	}
}





function func_cashbook_cart__month__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		//饼图
		//当月类型支出分布
		pub_click_month_cart = true;


		//生成饼图说明比例
		//$(".month-easycart").html("");

		var easycart_master = '<div class="col-xs-6 col-md-3" style="color:{#color}" onclick="func_cashbook_type_list__js(\'{#yyyyMM}\',\'{#type}\',pub_type_page_index,pub_type_page_size)"><div class="panel panel-default"><div class="panel-body easypiechart-panel text-center"><h4>{#type_name}:</h4><div class="easypiechart" id="easypiechart-{#easypiechart_id}" data-percent="{#easypiechart_data}"><span class="percent"><b style="font-size: 12px;">实：{#value}</b><br />{#easypiechart_data}%</span></div></div></div></div>';
		for (var i = 0; i < data.list.length ; i++)
		{
			var month_data = data.list[i];

			var easycart_html = easycart_master
				.replace("{#easypiechart_id}", i)
				.replace("{#value}", month_data.value)
				.replace("{#color}", month_data.color)
				.replace("{#type_name}", month_data.label)
				.replace("{#easypiechart_data}", month_data.pen)
				.replace("{#easypiechart_data}", month_data.pen)
				.replace("{#type}", month_data.type)
				.replace("{#yyyyMM}", moment(vm.cash_date).format("YYYY-MM"))
			;
			var easycart = $(easycart_html);
			$(".month-easycart").append(easycart);

			$('#easypiechart-' + i).easyPieChart({
				scaleColor: false,
				barColor: month_data.color
			});
		}

		var option_pie = {
			legend: {
				bottom: 10,
				left: 'center',
				data: ['零食', '网购', '娱乐', '早餐', '午餐', '晩餐', '煲汤', '运动', '水果', '交通', '房租']
			},
			color: ['red', 'green', 'yellow', 'blueviolet'],
			series: [
				{
					type: 'pie',
					radius: '65%',
					center: ['50%', '50%'],
					selectedMode: 'single',
					data: [
						{ value: 1548, name: '幽州' },
						{ value: 535, name: '荆州' },
					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};


		option_pie.series[0].data = data.list_xe;
		option_pie.color = data.list_xe_coloc;

		setTimeout(function ()
		{
			func_create_echarts('pie-chart', option_pie)
		}, 100);
	}
	else
	{
		func_alert(data.errmsg);
	}
}




function func_cashbook_cart__year__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		pub_click_year_cart = true;


		var option_line = {
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '支出',
					type: 'line',
					stack: '总量',
					smooth: true,
					label: {
						normal: {
							show: true,
							position: 'top' //inside
						}
					},
					data: [120, 1250, -101, -1000, 90, 5010, 210]
				}
			]
		};

		option_line.xAxis.data = data.list_month_str;
		option_line.series[0].data = data.list_pay_data;
		//option_line.series[1].data = data.list_income_data;

		setTimeout(function ()
		{
			func_create_echarts('line-chart', option_line)
		}, 100);
	}
	else
	{
		func_alert(data.errmsg);
	}
}


function func_cashbook_cart_type__year__success(data, textStatus, jqXHR)
{
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);

	if (data.errcode == 0)
	{
		var option_bar = {
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '直接访问',
					type: 'bar',
					barWidth: '60%',
					label: {
						normal: {
							show: true,
							position: 'top' //inside
						}
					},
					data: [10, 52, 200, 334, 390, 330, 220]
				}
			]
		};

		option_bar.xAxis[0].data = data.list_month_str;
		option_bar.series[0].data = data.list_pay_data;

		setTimeout(function ()
		{
			func_create_echarts('bar-chart', option_bar)
		}, 100);
	}
	else
	{
		func_alert(data.errmsg);
	}
}




$(function ()
{
	$(".date").mobiscroll().date({
		theme: "android-ics light",
		lang: "zh",
		cancelText: null,
		dateFormat: 'yy-mm',
		animate: "flip",
		onBeforeShow: function (inst) { inst.settings.wheels[0].length > 2 ? inst.settings.wheels[0].pop() : null; }, //弹掉“日”滚轮  
		headerText: function (valueText)
		{
			//自定义弹出框头部格式  
			array = valueText.split('-');
			var date_str = array[0] + "年" + array[1] + "月";

			return date_str;
		},
		onSelect: function (valueText, inst)
		{
			vm.cash_date = new Date(valueText);

			//先清空数据
			vm.cashbook_list = null;
			pub_page_index = 0;
			pub_page_size = 100;

			pub_click_month_cart = false;

			var yyyyMM = valueText;
			func_cashbook_list(yyyyMM, pub_page_index, pub_page_size);
			func_cashbook_sum(yyyyMM);
		}
	});
})


///////////////////////////////////
//// echarts画图
function func_create_echarts(element_id, option)
{
	var echart__ = echarts.init(document.getElementById(element_id));

	echart__.setOption(option);
}